<template>
<div class="menu-over" >
    <div 
    class="menu-abc" 
    :detail="item.path" 
    v-for="item of pp"  
    :key="item.id" >
        <img class="menu-img"  :src='getimg.imgs' />
        <p class="menu-sp">{{getimg.title}}</p>
        <ul class="list" >
            <li 
                class="list-li" 
               
                v-for="todo of list" 
                :key="todo.id"  @click="pathTo(todo.id)" >
                        <img class="list-img"  :src="todo.img" />
                        <span  class="list-span">{{todo.title}}</span>
            </li>
           
       </ul>
   </div>
   
   <!-- <div class="menu-abc" v-if="detail==='toweling'" >
     <img class="menu-img"  src='..\assets\tu3.jpg' />
       <p class="menu-sp">688541</p>
       <ul class="list"  v-for="todo of list" :key="todo.id">
           <li class="list-li">
               <img class="list-img" :src="todo.img" />
               <span class="list-span">{{todo.title}}</span>
            </li>
            <li class="list-li">
               <img class="list-img" :src="todo.img" />
               <span class="list-span">{{todo.title}}</span>
            </li>
              <li class="list-li">
               <img class="list-img" :src="todo.img" />
               <span class="list-span">{{todo.title}}</span>
            </li>
       </ul>
   </div> -->
   
  
   
</div>   
  
   
</template>

<script>

const bb = [{
               id:1,
               path:'badroom',
               imgs:require('@/assets/chuang.jpg'),
               title:' —— 卧室床品分类 ——'
           },{
               id:2,
               path:'toweling',
               imgs:require('@/assets/t2.jpg'),
               title:' —— 冠军毛巾分类 ——'
           },{
               id:3,
               path:'woman',
               imgs:require('@/assets/t3.jpg'),
               title:' —— 女装分类 ——'
           },{
               id:4,
               path:'man',
               imgs:require('@/assets/tu5.jpg'),
               title:' —— 男装分类 ——'
           },{
               id:5,
               path:'underwear',
               imgs:require('@/assets/tu6.jpg'),
               title:' —— 贴身衣物分类 ——'
           },{
               id:6,
               path:'slipper',
               imgs:require('@/assets/tu7.jpg'),
               title:' —— 袜子拖鞋分类 ——'
           },{
               id:7,
               path:'commodity',
               imgs:require('@/assets/tu8.jpg'),
               title:' —— 日用品分类 ——'
           },{
               id:8,
               path:'washing',
               imgs:require('@/assets/tu9.jpg'),
               title:' —— 洗涤用品分类 ——'
           },{
               id:9,
               path:'bag',
               imgs:require('@/assets/tu10.jpg'),
               title:' —— 包袋分类 ——'
           },{
               id:10,
               path:'child',
               imgs:require('../assets/tu11.jpg'),
               title:' —— 婴童用品分类 ——'
           }]
 
export default {
   
   props:['detail'],
  
    data(){
        return {
          pp:bb,
          list:[],
          topimg:''
       }
     },
     
     computed:{
        getimg(){
           return  this.pp.find(item=> item.path===this.detail)
            }
        
     },
    
   created(){
   
     },
    methods:{
      getAjx(){
           this.$http.get('http://rap2api.taobao.org/app/mock/86910/api/dapu-list')
        .then(resp=>{
            this.list=resp.data.data;
        })
      }  ,
       pathTo(id){
          this.$router.push('/soul/'+id)
          console.log(id)
         }
    },

    mounted(){
    //或者create，会先请求一次数据，这里只会请求一次
    // console.log(this.$data)
    //  console.log('你好')
    
   
},
created(){
  this.$http.get('http://rap2api.taobao.org/app/mock/86910/api/dapu-list')
        .then(resp=>{
            this.list=resp.data.data;
        })
},
 beforeRouteUpdate(to,from,next){
     //组件内守卫，点击时请求当前路由的数据
     //这里需要再次请求数据，这里是动态路由
    const _this=this;
    this.getAjx()
    
     //如果不执行next则不会跳转
     next()
 }

}
</script>

<style lang="scss">
.menu-over{
    height: 100%;
    overflow: hidden;
    
}
.menu-abc{
overflow-x: hidden;
         height: 100%;
}
   .menu-img{
    height: 112px;
    width: 280px;
    margin-left: 20px;
    margin-top: 10px;
    }
   
.menu-sp{
   margin-top:10px;
        padding: 10px 0px;
    text-align: center;
    font-size: 14px;
    font-family: 微软雅黑;
    color: #4c4c4c;
 
}
  
  .list{
   
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow: hidden;
    height: 100%;
    &-li{
        overflow-x: hidden;
        margin-top:18px;
        display: flex;
        flex-direction: column;
        height: 120px;
        width:93px;
         overflow-x: hidden;
        margin-bottom: 10px;
        text-align: center;
       
    }
    &-img{
    height: 60px;
     width: 60px;
     margin-top: 5px;
    margin-left:20px;
    margin-bottom:18px;
    }
    &-span{
        font-size: 15px;
        color:#4c4c4c;
    }
  }
 
</style>

